<template>
  <div class="inviting-friends">
    <div class="inviting-header">邀请记录</div>
    <div class="exchange-list">
      <div class="exchange-item" v-for="(item, index) in invitingRecord">
        <div class="left">
          <img :src="item.cover" alt="">
        </div>
        <div class="middle">
          <span class="name">邀请{{item.reason}}</span><br>
          <span class="need-points">{{item.date}}</span>
        </div>
        <div class="right">
          {{item.points}}
        </div>
      </div>
      <load :loadEvent="getWrap()"></load>
    </div>
    <a href="javascript:void(0);" class="inviting-btn">右上角分享(邀请好友获得50积分)</a>
  </div>
</template>

<script>
  import { XButton } from 'vux'
  import setShareInfo from 'COMMON/wx-share.js'
  import tools from 'COMMON/tools.js'
  import load from "COMPS/load.vue"
  import axios from 'axios'

  export default {
    name: 'inviting-friends',
    data: function() {
      return {
        invitingRecord: [],
        recordPage: 1,
        iCode: ''
      }
    },
    components: {
      XButton,
      load
    },
    mounted() {
      let that = this;
      this.iCode = tools.getArg('iCode', String(location.href).replace(/[#]*$/g, ""));

      if (window.DEBUGGING) {

      } else {
        axios.post('/Points/UserPoints').then(function(res) {
          if(res.data.msg == "success") {
          } else {
            location.href = "/Login/index?invite_code=" + that.iCode
          }
        })
      }
      
      // if (!window.IS_LOGINED) {
      //   location.href = "/register.html?iCode="+this.iCode
      // }
      this.getInvitingRecord();
    },
    methods: {
      getWrap() {
        return () => this.getInvitingRecord();
      },
      getInvitingRecord() {
        let that = this;
        if(window.DEBUGGING) {
          return new Promise(function(resolve) {
            resolve([{
              reason: '每天签到一次',
              cover: 'https://juwairenimg.oss-cn-hangzhou.aliyuncs.com/Face/faceimg_6341_200.jpg?x-oss-process=image/resize,w_70&&token=1536031775267',
              date: '2018-08-10 15:34',
              points: '+10'
            },{
              reason: '每天签到一次',
              cover: 'https://juwairenimg.oss-cn-hangzhou.aliyuncs.com/Face/faceimg_6341_200.jpg?x-oss-process=image/resize,w_70&&token=1536031775267',
              date: '2018-08-10 15:34',
              points: '-60'
            },{
              reason: '每天签到一次',
              cover: 'https://juwairenimg.oss-cn-hangzhou.aliyuncs.com/Face/faceimg_6341_200.jpg?x-oss-process=image/resize,w_70&&token=1536031775267',
              date: '2018-08-10 15:34',
              points: '+10'
            },{
              reason: '每天签到一次',
              cover: 'https://juwairenimg.oss-cn-hangzhou.aliyuncs.com/Face/faceimg_6341_200.jpg?x-oss-process=image/resize,w_70&&token=1536031775267',
              date: '2018-08-10 15:34',
              points: '-60'
            },{
              reason: '每天签到一次',
              cover: 'https://juwairenimg.oss-cn-hangzhou.aliyuncs.com/Face/faceimg_6341_200.jpg?x-oss-process=image/resize,w_70&&token=1536031775267',
              date: '2018-08-10 15:34',
              points: '+10'
            },{
              reason: '每天签到一次',
              cover: 'https://juwairenimg.oss-cn-hangzhou.aliyuncs.com/Face/faceimg_6341_200.jpg?x-oss-process=image/resize,w_70&&token=1536031775267',
              date: '2018-08-10 15:34',
              points: '-60'
            },{
              reason: '每天签到一次',
              cover: 'https://juwairenimg.oss-cn-hangzhou.aliyuncs.com/Face/faceimg_6341_200.jpg?x-oss-process=image/resize,w_70&&token=1536031775267',
              date: '2018-08-10 15:34',
              points: '+10'
            },{
              reason: '每天签到一次',
              cover: 'https://juwairenimg.oss-cn-hangzhou.aliyuncs.com/Face/faceimg_6341_200.jpg?x-oss-process=image/resize,w_70&&token=1536031775267',
              date: '2018-08-10 15:34',
              points: '-60'
            },{
              reason: '每天签到一次',
              cover: 'https://juwairenimg.oss-cn-hangzhou.aliyuncs.com/Face/faceimg_6341_200.jpg?x-oss-process=image/resize,w_70&&token=1536031775267',
              date: '2018-08-10 15:34',
              points: '+10'
            },{
              reason: '每天签到一次',
              cover: 'https://juwairenimg.oss-cn-hangzhou.aliyuncs.com/Face/faceimg_6341_200.jpg?x-oss-process=image/resize,w_70&&token=1536031775267',
              date: '2018-08-10 15:34',
              points: '-60'
            }])
          }).then(function(data){
            that.recordPage++;
            that.invitingRecord = that.invitingRecord.concat(data);
          })
        }

        return axios.get('/user/inviteRecord',{
          params: {
            page: that.recordPage
          }
        }).then(res => {
          let _data = res.data.data.map((e, index) => {
            return {
              reason: e.user_name,
              cover: e.user_avatar,
              date: e.record_addtime,
              points: e.record_points
            }
          })
          that.recordPage++;
          that.invitingRecord = that.invitingRecord.concat(_data);
        })
      },
      // inviting() {
      //   // todo: 邀请好友 - 分享地址是改页面，所以该页面需要判断用户是否登录
      //   let shareInfo = {
      //     title: '邀请好友注册',
      //     desc: '这里写邀请码',
      //     imgUrl: ''
      //   }
      //   setShareInfo(shareInfo, '/register.html', 2)
      // }
    }
  }
</script>

<style lang="less">
  @import '~COMMON/common.less';
html,body {
  margin: 0px;padding: 0px;
}
.inviting-friends {
  position: relative;
  height: 100vh;
  padding: 0 18px;
  padding-bottom: 50px;
  .inviting-header {
    line-height: 50px;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    border-bottom: 1px solid #eaeaea;
  }
  .exchange-list {
    .exchange-item {
      display: table;
      width: 100%;
      padding: 12px 0px;
      border-bottom: 1px solid #EAEAEA;
      .left {
        display: inline-block;
        vertical-align: middle;
        margin-right: 15px;
        >img {
          .Round(44px);
        }
      }
      .middle {
        display: inline-block;
        vertical-align: middle;
        // display: inline-block;
        .name {
          font-size: 14px;
          color: #333;
        }
        .need-points {
          font-size: 12px;
          color: #999;
        }
      }
      .right {
        display: inline-block;
        float: right;
        line-height: 50px;
        color: #FF3939;
        font-size: 12px;
      }
    }
  }
  .inviting-btn {
    position: fixed;
    bottom: 0px;
    left: 0px;
    display: inline-block;
    text-align: center;
    width: 100%;
    line-height: 50px;
    font-size: 18px;
    color: #FFFFFF;
    background: #039D4C;
  }
}
</style>